<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>阿里百秀-发现生活，发现美!</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.css">
</head>

<body>
    <div class="wrapper">
        <div class="topnav">
            <ul>
                <li><a href="javascript:;"><i class="fa fa-glass"></i>奇趣事</a></li>
                <li><a href="javascript:;"><i class="fa fa-phone"></i>潮科技</a></li>
                <li><a href="javascript:;"><i class="fa fa-fire"></i>会生活</a></li>
                <li><a href="javascript:;"><i class="fa fa-gift"></i>美奇迹</a></li>
            </ul>
        </div>
        <div class="header">
            <h1 class="logo">
                <a href="index.html"><img src="assets/img/logo.png" alt=""></a>
            </h1>
            <ul class="nav">
                <li><a href="javascript:;"><i class="fa fa-glass"></i>奇趣事</a></li>
                <li><a href="javascript:;"><i class="fa fa-phone"></i>潮科技</a></li>
                <li><a href="javascript:;"><i class="fa fa-fire"></i>会生活</a></li>
                <li><a href="javascript:;"><i class="fa fa-gift"></i>美奇迹</a></li>
            </ul>
            <div class="search">
                <form>
                    <input type="text" class="keys" placeholder="输入关键字">
                    <input type="submit" class="btn" value="搜索">
                </form>
            </div>
            <div class="slink">
                <a href="javascript:;">链接01</a> | <a href="javascript:;">链接02</a>
            </div>
        </div>
        <div class="aside">
            <div class="widgets">
                <h4>搜索</h4>
                <div class="body search">
                    <form>
                        <input type="text" class="keys" placeholder="输入关键字">
                        <input type="submit" class="btn" value="搜索">
                    </form>
                </div>
            </div>
            <div class="widgets">
                <h4>随机推荐</h4>
                <ul class="body random">
                    <li>
                        <a href="javascript:;">
                            <p class="title">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="uploads/widget_1.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">可爱卡通造型 iPhone 6防水手机套</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="uploads/widget_2.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">变废为宝！将手机旧电池变为充电宝的Better</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="uploads/widget_3.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">老外偷拍桂林芦笛岩洞 美如“地下彩虹”</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="uploads/widget_4.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">doge神烦狗打底南瓜裤 就是如此魔性</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="uploads/widget_5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="widgets">
                <h4>最新评论</h4>
                <ul class="body discuz">
                    <li>
                        <a href="javascript:;">
                            <div class="avatar">
                                <img src="uploads/avatar_1.jpg" alt="">
                            </div>
                            <div class="txt">
                                <p>
                                    <span>鲜活</span>9个月前(08-14)说:
                                </p>
                                <p>挺会玩的</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="avatar">
                                <img src="uploads/avatar_1.jpg" alt="">
                            </div>
                            <div class="txt">
                                <p>
                                    <span>鲜活</span>9个月前(08-14)说:
                                </p>
                                <p>挺会玩的</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="avatar">
                                <img src="uploads/avatar_2.jpg" alt="">
                            </div>
                            <div class="txt">
                                <p>
                                    <span>鲜活</span>9个月前(08-14)说:
                                </p>
                                <p>挺会玩的</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="avatar">
                                <img src="uploads/avatar_1.jpg" alt="">
                            </div>
                            <div class="txt">
                                <p>
                                    <span>鲜活</span>9个月前(08-14)说:
                                </p>
                                <p>挺会玩的</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="avatar">
                                <img src="uploads/avatar_2.jpg" alt="">
                            </div>
                            <div class="txt">
                                <p>
                                    <span>鲜活</span>9个月前(08-14)说:
                                </p>
                                <p>挺会玩的</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="avatar">
                                <img src="uploads/avatar_1.jpg" alt="">
                            </div>
                            <div class="txt">
                                <p>
                                    <span>鲜活</span>9个月前(08-14)说:
                                </p>
                                <p>挺会玩的</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="swipe">
                <ul class="swipe-wrapper">
                    <!-- 模板引擎填充 -->
                </ul>
                <p class="cursor">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
                <a href="javascript:;" class="arrow prev"><i class="fa fa-chevron-left"></i></a>
                <a href="javascript:;" class="arrow next"><i class="fa fa-chevron-right"></i></a>
            </div>
            <div class="panel focus">
                <h3>焦点关注</h3>
                <ul>
                    <li class="large">
                        <a href="javascript:;">
                            <img src="uploads/hots_1.jpg" alt="">
                            <span>XIU主题演示</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_2.jpg" alt="">
                            <span>星球大战：原力觉醒视频演示 电影票68</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_3.jpg" alt="">
                            <span>你敢骑吗？全球第一辆全功能3D打印摩托车亮相</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_4.jpg" alt="">
                            <span>又现酒窝夹笔盖新技能 城里人是不让人活了！</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_5.jpg" alt="">
                            <span>又现酒窝夹笔盖新技能 城里人是不让人活了！</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="panel top">
                <h3>一周热门排行</h3>
                <ol>
                    <li>
                        <i>1</i>
                        <a href="javascript:;">你敢骑吗？全球第一辆全功能3D打印摩托车亮相</a>
                        <a href="javascript:;" class="like">赞(964)</a>
                        <span>阅读 (18206)</span>
                    </li>
                    <li>
                        <i>2</i>
                        <a href="javascript:;">又现酒窝夹笔盖新技能 城里人是不让人活了！</a>
                        <a href="javascript:;" class="like">赞(964)</a>
                        <span class="">阅读 (18206)</span>
                    </li>
                    <li>
                        <i>3</i>
                        <a href="javascript:;">实在太邪恶！照亮妹纸绝对领域与私处</a>
                        <a href="javascript:;" class="like">赞(964)</a>
                        <span>阅读 (18206)</span>
                    </li>
                    <li>
                        <i>4</i>
                        <a href="javascript:;">没有任何防护措施的摄影师在水下拍到了这些画面</a>
                        <a href="javascript:;" class="like">赞(964)</a>
                        <span>阅读 (18206)</span>
                    </li>
                    <li>
                        <i>5</i>
                        <a href="javascript:;">废灯泡的14种玩法 妹子见了都会心动</a>
                        <a href="javascript:;" class="like">赞(964)</a>
                        <span>阅读 (18206)</span>
                    </li>
                </ol>
            </div>
            <div class="panel hots">
                <h3>热门推荐</h3>
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_2.jpg" alt="">
                            <span>星球大战:原力觉醒视频演示 电影票68</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_3.jpg" alt="">
                            <span>你敢骑吗？全球第一辆全功能3D打印摩托车亮相</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_4.jpg" alt="">
                            <span>又现酒窝夹笔盖新技能 城里人是不让人活了！</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="uploads/hots_5.jpg" alt="">
                            <span>实在太邪恶！照亮妹纸绝对领域与私处</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="panel new">
                <h3>最新发布</h3>
                <div class="entry">
                    <div class="head">
                        <span class="sort">会生活</span>
                        <a href="javascript:;">星球大战：原力觉醒视频演示 电影票68</a>
                    </div>
                    <div class="main">
                        <p class="info">admin 发表于 2015-06-29</p>
                        <p class="brief">星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯</p>
                        <p class="extra">
                            <span class="reading">阅读(3406)</span>
                            <span class="comment">评论(0)</span>
                            <a href="javascript:;" class="like">
                                <i class="fa fa-thumbs-up"></i>
                                <span>赞(167)</span>
                            </a>
                            <a href="javascript:;" class="tags">
                                分类：<span>星球大战</span>
                            </a>
                        </p>
                        <a href="javascript:;" class="thumb">
                            <img src="uploads/hots_2.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="entry">
                    <div class="head">
                        <span class="sort">会生活</span>
                        <a href="javascript:;">星球大战：原力觉醒视频演示 电影票68</a>
                    </div>
                    <div class="main">
                        <p class="info">admin 发表于 2015-06-29</p>
                        <p class="brief">星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯</p>
                        <p class="extra">
                            <span class="reading">阅读(3406)</span>
                            <span class="comment">评论(0)</span>
                            <a href="javascript:;" class="like">
                                <i class="fa fa-thumbs-up"></i>
                                <span>赞(167)</span>
                            </a>
                            <a href="javascript:;" class="tags">
                                分类：<span>星球大战</span>
                            </a>
                        </p>
                        <a href="javascript:;" class="thumb">
                            <img src="uploads/hots_2.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="entry">
                    <div class="head">
                        <span class="sort">会生活</span>
                        <a href="javascript:;">星球大战：原力觉醒视频演示 电影票68</a>
                    </div>
                    <div class="main">
                        <p class="info">admin 发表于 2015-06-29</p>
                        <p class="brief">星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯</p>
                        <p class="extra">
                            <span class="reading">阅读(3406)</span>
                            <span class="comment">评论(0)</span>
                            <a href="javascript:;" class="like">
                                <i class="fa fa-thumbs-up"></i>
                                <span>赞(167)</span>
                            </a>
                            <a href="javascript:;" class="tags">
                                分类：<span>星球大战</span>
                            </a>
                        </p>
                        <a href="javascript:;" class="thumb">
                            <img src="uploads/hots_2.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
        </div>
    </div>
    <script src="assets/vendors/jquery/jquery.js"></script>
    <script src="assets/vendors/swipe/swipe.js"></script>
    <!-- 填坑，首页用到了进度条插件，引入 -->
    <script src="assets/vendors/nprogress/nprogress.js"></script>
    <!-- 引入模板引擎 -->
    <script src="assets/vendors/template/template-web.js"></script>

    <!-- 准备模板 -->
    <script type="text/html" id="tmp-slids">

        {{ each list v i }}
        <li>
            <a href="#">
                <img src="{{ v.image }}">
                <span>{{ v.text }}</span>
            </a>
        </li>
        {{ /each }}

    </script>

    <script type="text/html" id="tmp-point">

        {{ each list v i }}

        <span class="{{ i==0 ? 'active' : '' }}"></span> {{ /each }}

    </script>

    <script>
        //----------------------------------------免责代码-------------------------------------------------
        function banner() {
            var swiper = Swipe(document.querySelector('.swipe'), {
                auto: 3000,
                transitionEnd: function(index) {
                    // index++;

                    $('.cursor span').eq(index).addClass('active').siblings('.active').removeClass('active');
                }
            });

            // 上/下一张
            $('.swipe .arrow').on('click', function() {
                var _this = $(this);

                if (_this.is('.prev')) {
                    swiper.prev();
                } else if (_this.is('.next')) {
                    swiper.next();
                }
            });
        }

        // ------------------------------------------------------------------------------------------------

        // 动态渲染轮播图
        // 异步会导致页面布局混乱
        $.ajax({
            url: './admin/slides/slidesGet.php',
            dataType: 'json',
            success: function(info) {
                console.log(info);

                var data = JSON.parse(info[0]['value']);
                console.log(data);

                // 调用模板引擎渲染图片
                var obj = {
                    list: data
                };
                var str = template('tmp-slids', obj);
                $('.swipe-wrapper').html(str);

                // 调用模板引擎渲染小圆点
                $('.cursor').html(template('tmp-point', {
                    list: data
                }));

                // 在页面结构渲染完成后，再执行轮播图特效，这样页面结构特效才不会乱
                banner();
            }
        });
    </script>
</body>

</html>